<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>在线监控</title>
	<link rel="stylesheet" href="css/monitoring.css">
	<link rel="stylesheet" href="css/main.css">
	<script src="js/ezuikit.js"></script>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<style>
		.zz {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
			background: rgba(0, 0, 0, 0.5);
			height: 95%;
			display: flex;
			justify-content: center;
		}

		.wrap_video {
			position: relative;
			margin-bottom: 20px;
		}

		.loading {
			animation: circle 1s linear infinite;
		}

		@keyframes circle {
			from {
				transform: rotate(0);
			}

			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">在线监控</div>
				<img src="image/return.png" alt="返回" class="return" onclick="history.back()">
			</div>

			<div class="content_video header-after" v-for="item in lives" :key="item.id">
				<div class="video_name">
					<span v-text="item.area"></span>
				</div>
				<div class="wrap_video">
					<video class="video" :id="'live_'+item.id" :src="item.src" autoplay controls playsinline
						webkit-playsinline :ref="'live_'+item.id"></video>
					<div class="video zz" @click="click(item)" v-if="item.state!=2">
						<img src="/wechat/image/play.svg" v-if="!item.state">
						<img src="/wechat/image/loading.svg" class="loading" v-if="item.state==1">
					</div>
				</div>
			</div>

		</div>
	</div>

	<script src="/js/common.js"></script>
	<script>

		var domain = 'https://b.yoyo51.net';

		function stop(url) {
			var ts = url.match(/auth_key=(\d+)-/);
			if (!ts) return;
			ts = ts[1];
			setTimeout(function () {
				alert('视频结束');
				location.reload();
			}, ts - new Date().getTime());
		}

		function playFlv(url, videoElement) {
			if (!flvjs.isSupported()) {
				alert('不支持flv');
				return;
			}
			var flvPlayer = flvjs.createPlayer({
				type: 'flv',
				url: domain + url
			});
			flvPlayer.attachMediaElement(videoElement);
			flvPlayer.load();
			flvPlayer.play();
			stop(url);
		}

		var player;
		function playDash(url, videoElement) {
			if (!player)
				player = dashjs.MediaPlayer().create();
			player.initialize(videoElement, url, true);
		}

		var app = new Vue({
			el: '#vue-root',
			data: {
				lives: [],
				isStudent: !isTeacher()
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					var url = this.isStudent ? '/s/live' : '/t/live';
					axios.get(url).then(function (res) {
						this.lives = res.data;
						this.fastPlay();
					}.bind(this));
				},
				fastPlay: function () {
					var q = location.search;
					if (!q) return;
					q = q.substr(1);
					this.$nextTick(function () {
						this.lives.forEach(function (live) {
							if (live.id == q) {
								this.getAddress(live);
								// location.hash = 'live_' + live.id;
								location.replace(location.href.split('#')[0] + '#' + 'live_' + live.id);
							}
						}.bind(this));
					}.bind(this));
				},
				click: function (live) {
					location.replace(location.href.split('?')[0] + '?' + live.id);
				},
				getAddress: function (live) {
					if (!live.paid || !this.isStudent) {
						this.getAddress1(live);
						return;
					}
					axios.get('/s/live/paid/' + live.id).then(function (res) {
						if (res.data) {
							this.getAddress1(live);
							return;
						}

						axios.get('/s/live/free/' + live.id).then(function (res) {
							if (!res.data) {
								if (!confirm('此为付费视频。立即付费？')) return;
								location.href = 'live_pay.html?id=' + live.id;
								return;
							}
							this.watch(live, res);
						}.bind(this));

					}.bind(this));
				},
				getAddress1: function (live) {
					Vue.set(live, 'state', 1);
					var url = this.isStudent ? '/s/live/link1/' : '/t/live/link/';
					axios.get(url + live.id).then(function (res) {
						this.watch(live, res);
					}.bind(this));
				},
				watch: function (live, res) {
					var no = live.channelNo;
					var video = this.$refs['live_' + live.id][0];
					if (no >= 0) return this.ys7(res.data, live);
					if (no == -1) {
						playDash(res.data.hdAddress, video);
					} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
						var url = res.data.liveAddress;
						if (!/^http/.test(url)) url = domain + url;
						live.src = url;
						video.addEventListener('loadedmetadata', video.play.bind(video));
						stop(res.data.liveAddress);
					} else if (no == -2) playFlv(res.data.hdAddress, video);
					else {
						var hls = new Hls();
						hls.loadSource(res.data.hdAddress);
						hls.attachMedia(video);
						hls.on(Hls.Events.MEDIA_ATTACHED, function () {
							video.play();
						});
					}

					setTimeout(function () {
						live.state = 2;
					}, 2000);
				},
				ys7: function (data, live) {
					var exception = data.exception;
					if (exception != 0) {
						var msg = '';
						if (exception == 1) msg = '设备不在线';
						else if (exception == 2) msg = '设备开启视频加密';
						else if (exception == 3) msg = '设备删除';
						else if (exception == 4) msg = '失效';
						else if (exception == 5) msg = '未绑定';
						else if (exception == 7) msg = '状态返回地址';
						alert(msg);
						live.state = 0;
						return;
					}

					Vue.set(live, 'src', data.liveAddress);
					this.$nextTick(function () {
						live.state = 2;
						new EZUIKit.EZUIPlayer('live_' + live.id);
					});
				},
			}
		})
	</script>

	<script src="https://cdn.bootcdn.net/flv.js/1.6.2/flv.min.js"></script>
	<script src="https://cdn.bootcdn.net/hls.js/1.4.3/hls.light.min.js"></script>
	<script src="https://cdn.bootcdn.net/dashjs/4.7.0/dash.mediaplayer.min.js"></script>
</body>

</html>